<template>
	<view class="content">
		<z-paging style="height: 100%;" ref="paging" auto-show-back-to-top :enable-back-to-top="currentIndex===tabIndex" v-model="dataList"
			@query="queryList" :fixed="false" :mounted-auto-call-reload="false" loading-more-no-more-text="暂无更多">
			<empty-view slot="empty">
				<no-data customClass="bg-f5"></no-data>
			</empty-view>
			<view>
				<block class="item" v-for="(item,index) in dataList" :key="index">
					<community-card :item="item"></community-card>
				</block>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		getCommunityList
	} from '@/api/community';
	import communityCard from '@/components/communityCard/communityCard.vue';
	import noData from '@/components/noData/noData.vue';
	export default {
		components: {
			communityCard,
			noData
		},
		data() {
			return {
				dataList: [],
			}
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						setTimeout(() => {
							this.$refs.paging.reload();
						}, 5);
					}
				},
				immediate: true
			},
		},
		methods: {
			async queryList(page, pageSize) {
				const postData = {
					page,
					pageSize,
					category_id: this.currentIndex,
				}
				const res = await getCommunityList(postData);
				this.$refs.paging.complete(res.data.list);
			},
		}
	}
</script>

<style>
	/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
	/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
		padding: 0 28rpx;
	}
</style>
